<template>
  <div class="main">
    <el-form label-width="120px">
      <h4>通过 v-clipboard="value" 进行复制</h4>
      <el-form-item label="复制内容输入框">
        <el-input v-model="value" placeholder="请输入需要复制的内容"/>
      </el-form-item>
      <el-form-item label="无提示">
        <el-button type="primary" v-clipboard="value">复制</el-button>
      </el-form-item>
      <el-form-item label="有提示">
        <el-button type="primary" v-clipboard:copy="value" v-clipboard:success="onSuccess" v-clipboard:error="onError">
          复制
        </el-button>
      </el-form-item>
    </el-form>
    <el-form label-width="120px">
      <h4>通过 toClipboard 函数进行复制</h4>
      <el-form-item label="复制内容输入框">
        <el-input v-model="value" placeholder="请输入需要复制的内容"/>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="toClipboard(value)">复制</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { toClipboard } from '@soerenmartius/vue3-clipboard'

export default defineComponent({
  name: 'clipboard',
  setup() {
    const value = ref('我是需要复制的内容')
    const onSuccess = () => {
      ElMessage({
        type: 'success',
        message: '复制成功'
      })
    }

    const onError = () => {
      ElMessage({
        type: 'error',
        message: '复制失败'
      })
    }
    return {
      value,
      onSuccess,
      onError,
      toClipboard
    }
  }
})
</script>

<style scoped>

</style>
